package myJs.cps

import myJs.cps.PureInputCp
import myJs.myPkg.reactHookForm._
import org.scalajs.dom.html
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Fragment
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js
import myJs.Implicits._
import slinky.core.facade.Hooks.useEffect

/** Created by yz on 3/11/2020
  */
@react object InputInlineNoFormGroupCp {

  case class Props(
      useForm: UseFormRT,
      name: String,
      registerOptions: RegisterOptions = RegisterOptions(),
      onChange: js.UndefOr[String => Unit] = js.undefined,
      value: String = "",
      onFocus: js.UndefOr[html.Input => Unit] = js.undefined,
      inputWidth: Int = 4,
      show: Boolean = true,
      label: String,
      questionInfo: String = "",
      placeHolder: String = "",
      `type`: String = "text",
      key: String = "",
      hasLabel: Boolean = true,
      readOnly: Boolean = false
  )

  val component = FunctionalComponent[Props] { props =>
    val displayStr = if (props.show) csstypeStrings.block else csstypeStrings.none

    useEffect(
      () => {
        props.useForm.trigger(props.name)
      },
      List(props.show)
    )

    div(
      key := props.key,
      style := Style(display = displayStr),
      className := s"",
      if (props.hasLabel) {
        label(
          className := "control-label col-sm-2",
          s"${props.label}",
          if (props.questionInfo.nonBlank) {
            span(
              className := "",
              a(
                `type` := "button",
                className := "selfQuestion",
                title := "Note",
                data - "container" := "body",
                data - "toggle" := "popover",
                data - "html" := "true",
                data - "placement" := "left",
                data - "content" := props.questionInfo,
                data - "trigger" := "click",
                i(className := "fa fa-question-circle-o")
              )
            )
          } else null,
          ":"
        )
      } else null,
      div(
        className := s"col-sm-${props.inputWidth}",
        PureInputCp(
          useForm = props.useForm,
          name = s"${props.name}Show",
          value = s"${props.show}",
          `type` = "hidden"
        ),
        PureInputCp(
          useForm = props.useForm,
          name = props.name,
          registerOptions = props.registerOptions,
          onChange = props.onChange,
          value = props.value,
          onFocus = props.onFocus,
          placeHolder = props.placeHolder,
          `type` = props.`type`,
          readOnly = props.readOnly
        )
      )
    )

  }

}
